<template>
	<div class="rightmain">
		<div class="title">
			<div class="titleBadge"></div>
			我的收藏
		</div>
		<el-form :inline="true" :model="searchFrom" id="searchForm" style="margin-top: 30px">
			<el-form-item label="会议室名称">
				<el-input v-model.trim="name" placeholder="会议室名称"></el-input>
			</el-form-item>
			<el-form-item label="会议室位置">
				<my-cascader
								expand-trigger="hover"
								:options="Locations"
								v-model="searchFrom.location"
								change-on-select
								@change="LocationChange"
								placeholder="会议室位置"
								clearable
				></my-cascader>
			</el-form-item>
			<!--<el-form-item label="容纳人数">-->
				<!--<el-input-number v-model="searchFrom.Num" :controls="false" lable="容纳人数"></el-input-number>-->
			<!--</el-form-item>-->
			<el-form-item>
				<el-button type="primary" @click='resetForm' >重置</el-button>
			</el-form-item>
		</el-form>
		<div v-loading="loading">
			<el-table border
			          :data="tableData"
			          style="width: 100%">
				<el-table-column prop="RoomName" label="会议室名称" align="center"></el-table-column>
				<el-table-column prop="Position" label="会议室位置" align="center"></el-table-column>
				<el-table-column prop="Capacity" label="容纳人数" align="center"></el-table-column>
				<el-table-column prop="ReserveAdvanceDays" label="允许提前" align="center">
					<template slot-scope="scope">
						{{scope.row.ReserveAdvanceDays}}天
					</template>
				</el-table-column>
				<el-table-column prop="roomName" label="状态" align="center">
					<template slot-scope="scope">
						{{getRoomStatus(scope.row.RoomStatus)}}
					</template>
				</el-table-column>
				<el-table-column prop="AdminName" label="管理员" align="center"></el-table-column>
				<el-table-column prop="roomName" label="预定模式" align="center">
					<template slot-scope="scope">
						{{getPredefinedmode(scope.row.ApprovalType)}}
					</template>
				</el-table-column>
				<el-table-column prop="roomName" label="操作" align="center" width="150">
					<template slot-scope="scope">
					<el-button type="text" @click="removefav(scope.row)">取消收藏</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script type="es6">
import meetingTable from '../mixin/meetingTable';
import Reserve from '../mixin/Reserve';
import myCommon from '../mixin/myCommon';
import API from '@/API';
import myCascader from '../components/myCascader';
export default {
  mixins: [Reserve, meetingTable, myCommon],
  data () {
    return {
      searchFrom: {
        location: [],
        Num: undefined
      },
      name: '',
      tableData: [],
      loading: false,
      timer: null
    };
  },
  components: {
    myCascader
  },
  computed: {},
  methods: {
    resetForm () {
      this.name = '';
      this.searchFrom = {
        location: [],
        Num: undefined
      };
    },
    search () {
      this.loading = true;
      let param = {
        Capacity: this.searchFrom.Num
      };
      if (this.searchFrom.location.length > 0) {
        param.RegionID = this.searchFrom.location[0];
      }
      if (this.searchFrom.location.length > 1) {
        param.FloorID = this.searchFrom.location[1];
      }
      API.getMyfavoriteList(param).then((res) => {
        let json = res.data;
        if (json.status === '200') {
          this.loading = false;
          if (json.data) {
            this.tableData = json.data;
          }
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    removefav (val) {
      this.loading = true;
      this.removefavorite(val, (res) => {
        if (res) {
          this.search();
          this.$notify({
            title: '成功',
            message: '取消收藏成功',
            type: 'success'
          });
        } else {
          this.loading = false;
        }
      });
    }
  },
  mounted () {
    this.initLocations();
  },
  watch: {
    searchFrom: {
      handler (newval) {
        this.search();
      },
      deep: true,
      immediate: true
    },
    name () {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.search();
      }, 200);
    }
  }
};
</script>
<style lang="less">
	@import "../../styles/userCommon";
</style>
